<template>
	<view class="fun-flex-col page">
		<uni-nav-bar background-color="#F6F6F6" leftWidth="60rpx" rightWidth="60rpx" status-bar left-icon="left" :fixed="true" :border="false" @clickLeft='back'>
			<block slot="default">
				<div class="nav-bar">
					<view class="title">{{orderInfo.productName}}</view>
					<view class="sub">Order No.:{{orderInfo.orderNo}}</view>
				</div>
			</block>
		</uni-nav-bar>
		
		<view class="content">
			<view class="list-wrap">
				<view class="list">
					<text>Order Status</text>
					<view class="status">Settled</view>
				</view>
				
				<view class="list">
					<text>Principal</text>
					<view>${{orderInfo.seedmoney}}</view>
				</view>
				
				<view class="list">
					<text>Purchase Date</text>
					<view>{{UTILS.setDateFormat(orderInfo.buytime)}}</view>
				</view>
				
				<view class="list">
					<text>Expiry Date</text>
					<view>{{UTILS.setDateFormat(orderInfo.settlementdate)}}</view>
				</view>
				
				<view class="list">
					<text>Cumulative Return</text>
					<view :class="orderInfo.tradeprofit < 0 ? 'fall-text' : 'rise-text'">{{orderInfo.tradeprofit}}</view>
				</view>
				
				<view class="list">
					<text>Performance Standard(%)</text>
					<view>{{orderInfo.servicecharge}}%</view>
				</view>
				
				<view class="list">
					<text>Performance Fee</text>
					<view :class="orderInfo.servicechargeamount < 0 ? 'fall-text' : 'rise-text'">{{orderInfo.servicechargeamount}}</view>
				</view>
				
				<view class="list">
					<text>Net Return</text>
					<view :class="orderInfo.totalprofit < 0 ? 'fall-text' : 'rise-text'">{{orderInfo.totalprofit}}</view>
				</view>
				
				<view class="list total">
					<text>Settlement Amount</text>
					<view>${{orderInfo.settlementamount}}</view>
				</view>
			</view>
			
			<chart-area :chartData="chartData"></chart-area>

			<view class="table">
				<view class="fun-flex-row fun-justify-between fun-items-center head">
					<text class="flex_1">Date</text>
					<text class="flex_2">Transaction Amount</text>
					<text class="flex_3">Trade Profit/Loss</text>
					<text class="flex_4">No.of Trades</text>
				</view>
				
				<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" class="table-con">
					<view class="fun-flex-row fun-justify-between fun-items-center list"  v-for="item in orderDayList" :key='item.dayId'>
						<view class="line-one">{{UTILS.setDateFormat(item.date)}}</view>
						
						<text class="line-two">${{item.tradingAmount}}</text>
						
						<view class="fun-flex-col fun-items-center fun-justify-between line-three">
							<text class="profit" :class="item.profit < 0 ? 'fall-text' : 'rise-text'">{{removeMinusSign(item.profit)}}</text>
							
							<view class="fun-flex-row fun-items-center amount-box" :class="item.profitRate < 0 ? 'fall-box' : 'rise-box'">
								<image src="@/static/common/fall.png" v-if='item.profitRate < 0'></image>
								<image src="@/static/common/rise.png" v-else />
								<text :class="item.profitRate < 0 ? 'fall-text' : 'rise-text'">{{item.profitRate}}%</text>
							</view>
						</view>
						
						<view class="fun-flex-row fun-items-center fun-justify-center line-four" @click="toTradeDetail(item)">
							{{item.tradingNumber}}
							<image src="@/static/common/arrow_right_black.png"/>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getTimeZone,removeMinusSign,roundToDecimal} from "@/common/js/func.js"
	import {holdingsDetail,holdOrderDayList} from "@/api/home.js"
	import chartArea from "@/components/chartArea.vue"
	export default {
		data() {
			return {
				queryData:{
					orderId:"",
					timeZone:8
				},
				queryList:{
					orderId:"",
					page:1,
					limit:10,
				},
				chartData:{},
				orderDayList:[],
				total:0,
				orderInfo:{},
				orderNo:"",
				removeMinusSign
			};
		},
		
		onLoad(option) {
			this.queryData.timeZone = getTimeZone() || 8;
			this.orderNo = decodeURIComponent(option.orderNo) || "";
			this.queryData.orderId = this.UTILS.stringToNum(decodeURIComponent(option.orderId)) || null;
			this.queryList.orderId = this.queryData.orderId;
			this.getHoldingsDetail();
			this.getHoldOrderDayList()
		},
		
		methods: {
			getHoldingsDetail(){
				holdingsDetail(this.queryData).then(res => {
					if(res.code == 0){
						this.orderInfo = res.data || {};
						this.chartData = {
							"categories": res.data?.linechart.map(ele => ele.name.slice(-5).replace("-","/")) || [],
							"series": [{
								"name": "Pre fee value",
								"data": res.data?.linechart.map(ele => roundToDecimal(ele.value)) || [],
								"legendShape":"circle",
								"dataPointShapeType":"hollow",
								"addPoint":true
							}]
						}
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			getHoldOrderDayList(){
				holdOrderDayList(this.queryList).then(res => {
					if(res.code == 0){
						this.orderDayList = this.orderDayList?.concat(res?.data || []) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.orderDayList.length) {
					this.queryList.page++;
					this.getHoldOrderDayList();
				}
			},
			
			toTradeDetail(item){
				if(item.tradingdata == 2){
					const query = {
						dayId:encodeURIComponent(item.dayId),
						orderId:encodeURIComponent(this.queryData.orderId),
						orderNo: encodeURIComponent(this.orderNo),
						productName:encodeURIComponent(this.orderInfo.productName)
					}
					uni.navigateTo({url:`/pages/home/seeMore?query=${JSON.stringify(query)}`})
				}
				else{
					if(item.tradingdata == 0){
						this.UTILS.logStr("此产品不提供交易明细");
						return
					}
					if(item.tradingdata == 1){
						this.UTILS.logStr("数据正在同步");
						return
					}
				}
			},
			
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		},
		
		components:{
			chartArea
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.nav-bar{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.title{
				font-size: 32rpx;
				max-width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.sub{
				font-size: 24rpx;
				color: #7F7F7F;
			}
		}
		.content {
			padding: 32rpx 32rpx 0 32rpx;
			.list-wrap{
				.list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 48rpx;
					margin-top: 16rpx;
					&:first-child {
						margin-top: 0;
					}
					text{
						font-size: 28rpx;
						color: #23262F;
					}
					view{
						font-size: 28rpx;
						color: #666666;
					}
					.fall-text{
						color: #ca5456;
					}
					.rise-text{
						color: #51844D;
					}
					.status {
						font-weight: 500;
						font-size: 24rpx;
						background: #979797;
						border-radius: 4rpx;
						padding: 8rpx 36rpx;
						line-height: 28rpx;
						color: #ffffff;
					}
				}
				.total{
					padding-top: 16rpx;
					border-top: 2rpx solid #ECECEC;;
					font-weight: bold;
					text,view{
						color: #000;
					}
				}
			}
			.table{
				margin-top: 40rpx;
				padding-bottom: 100rpx;
				.head {
					font-weight: 500;
					font-size: 24rpx;
					text-align: center;
					height: 80rpx;
				}
				&-con{
					max-height: 350px;
					.list{
						font-weight: 500;
						font-size: 24rpx;
						// height: 80rpx;
						.line-two{
							text-align: center;
						}
						.line-three{
							line-height: 32rpx;
							.amount-box{
								margin-top: 8rpx;
								border-radius: 10rpx;
								padding: 4rpx 12rpx;
								image{
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
								}
							}
						}
						
						.line-four{
							image{
								width: 24rpx;
								height:24rpx;
								margin-left:44rpx
							}
						}
					}
					.list:not(:last-child){
						margin-bottom: 16rpx;
					}
				}
			}
		}
		.line-one,.flex_1{
			flex:0.1;
			overflow-wrap: break-word;
		}
		.line-two,.flex_2{
			flex:0.3;
		}
		.line-three,.flex_3{
			flex:0.3;
		}
		.line-four,.flex_4{
			flex:0.25;
		}
	}
</style>